<template>
  <el-card class="home__card-item home__waiting-payment">
    <div slot="header" class="home__card-title clearfix">
      <h3>应付余额（采购）</h3>
      <div>截至: {{ currentDate }}</div>
    </div>

    <div class="home__card-content">
      <!-- 汇总 -->
      <div class="home__card-content-sum">
        <div class="home__card-content-sum__item">
          <label>{{ this.summary.totalAmountText }}</label>
          <span>{{ this.summary.totalAmount }}</span>
        </div>
      </div>

      <!-- 详情 -->
      <div class="home__card-content-wrap">
        <tabs v-model="currentTab" :tabs="tabs" />
        <!-- 开票时间 -->
        <template v-if="currentTab === 'invoice'">
          <div class="home__waiting-payment__content">
            <el-table
              :data="tableDataInvoice"
              border
              size="mini"
              height="350px">
              <el-table-column
                show-overflow-tooltip
                prop="index"
                label="排行" />
              <el-table-column
                show-overflow-tooltip
                prop="invoiceId"
                label="开票编号" />
              <el-table-column
                show-overflow-tooltip
                prop="vendorName"
                label="供应商名称" />
              <el-table-column
                show-overflow-tooltip
                prop="amount"
                label="待核销金额" />
              <el-table-column
                show-overflow-tooltip
                prop="procureUserName"
                label="采购" />
              <el-table-column
                show-overflow-tooltip
                prop="invoiceTime"
                label="开票时间">
                <template v-slot="scope">
                  <span>{{ parseTime(scope.row.invoiceTime) }}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
                       <!-- 分页组件 -->
        <pagination v-show="tableDataInvoiceTotal>0" :total="tableDataInvoiceTotal" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
                @pagination="waitingPaymentReport"/>
        </template>
        <!-- 供应商 -->
        <template v-if="currentTab === 'vendor'">
          <div class="home__waiting-payment__content">
            <el-table
              :data="tableDataVendor1"
              border
              size="mini"
              height="350px">
              <el-table-column
                show-overflow-tooltip
                prop="index"
                label="排行" />
              <el-table-column
                show-overflow-tooltip
                prop="vendorName"
                label="供应商名称" />
              <el-table-column
                show-overflow-tooltip
                prop="amount"
                label="应付余额" />
              <el-table-column show-overflow-tooltip prop="procureUserName" label="采购" />
            </el-table>
            <el-table
              :data="tableDataVendor2"
              border
              size="mini"
              height="350px">
              <el-table-column
                show-overflow-tooltip
                prop="index"
                label="排行" />
              <el-table-column
                show-overflow-tooltip
                prop="vendorName"
                label="供应商名称" />
              <el-table-column
                show-overflow-tooltip
                prop="amount"
                label="应付余额" />
              <el-table-column show-overflow-tooltip prop="procureUserName" label="采购" />
            </el-table>
          </div>
           <!-- 分页组件 -->
        <pagination v-show="tableDataVendorTotal>0" :total="tableDataVendorTotal" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
                @pagination="waitingPaymentReport"/>
        </template>
        <!-- 按采购 -->
        <template v-if="currentTab === 'procure'">
          <div class="home__waiting-payment__content">
            <el-table
              :data="tableDataProcure1"
              border
              size="mini"
              height="350px">
              <el-table-column
                show-overflow-tooltip
                prop="index"
                label="排行" />
              <el-table-column
                show-overflow-tooltip
                prop="procureUserName"
                label="采购" />
              <el-table-column
                show-overflow-tooltip
                prop="vendorCount"
                label="供应商数" />
              <el-table-column
                show-overflow-tooltip
                prop="amount"
                label="应付余额" />
            </el-table>
            <el-table
              :data="tableDataProcure2"
              border
              size="mini"
              height="350px">
              <el-table-column
                show-overflow-tooltip
                prop="index"
                label="排行" />
              <el-table-column
                show-overflow-tooltip
                prop="procureUserName"
                label="采购" />
              <el-table-column
                show-overflow-tooltip
                prop="vendorCount"
                label="供应商数" />
              <el-table-column
                show-overflow-tooltip
                prop="amount"
                label="应付余额" />
            </el-table>
          </div>
           <!-- 分页组件 -->
        <pagination v-show="tableDataProcureTotal>0" :total="tableDataProcureTotal" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
                @pagination="waitingPaymentReport"/>
        </template>
      </div>
    </div>
  </el-card>
</template>

<script>
import Tabs from './tabs.vue'
import moment from 'moment'
import { waitingPaymentReport } from '@/api/report/report'
export default {
  components: {
    Tabs
  },

  data() {
    return {
      summary: {},
      currentDate: moment().format('YYYY-MM-DD'),
      currentTab: 'invoice',
      tabs: [
        { name: '按开票时间', value: 'invoice' },
        { name: '按供应商', value: 'vendor' },
        { name: '按采购', value: 'procure' }
      ],
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10
      },
      tableDataInvoiceTotal: 1000,
      tableDataInvoice: [],
      tableDataVendor1: [],
      tableDataVendor2: [],
      tableDataVendorTotal: 1000,
      tableDataProcure1: [],
      tableDataProcure2: [],
      tableDataProcureTotal: 1000,
      instances: {}
    }
  },

  watch: {
    currentTab() {
      this.waitingPaymentReport()
    }
  },

  mounted() {
    window.addEventListener('resize', this.handleResize)
    this.$once('hook:beforeDestroy', () => {
      window.removeEventListener('resize', this.handleResize)
    })
  },
  created() {
    this.waitingPaymentReport()
  },
  methods: {
    waitingPaymentReport() {
       this.queryParams.createTime=[]
      waitingPaymentReport(this.currentTab, this.queryParams).then((response) => {
        this.summary = response.data.summary
        if (this.currentTab === 'invoice') {
          this.tableDataInvoiceTotal = response.data.tableDataInvoice.total
          this.tableDataInvoice = response.data.tableDataInvoice.list
        }
        if (this.currentTab === 'vendor') {
          console.log(response.data.tableDataVendor);
          var tableDataVendor = this.splitArray(
            response.data.tableDataVendor.list,
            5
          )
          console.log(tableDataVendor);
          this.tableDataVendor1 = tableDataVendor[0]
          this.tableDataVendor2 = tableDataVendor.length > 1 ? tableDataVendor[1] : []
          this.tableDataVendorTotal = response.data.tableDataVendor.total
        }
        if (this.currentTab === 'procure') {
          var tableDataProcure = this.splitArray(
            response.data.tableDataProcure.list,
            5
          )
          this.tableDataProcure1 = tableDataProcure[0]
          this.tableDataProcure2 = tableDataProcure.length > 1 ? tableDataProcure[1] : []
          this.tableDataProcureTotal = response.data.tableDataProcure.total
        }
      })
    },
    currentChange() {},
    getTableData() {},
    handleResize() {
      Object.keys(this.instances).forEach((key) => {
        this.instances[key]?.resize?.()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.home__waiting-payment {
  .home__waiting-payment__content {
    margin: 20px 0;
    display: flex;
    .home__waiting-payment__echart {
      width: 100%;
      height: 250px;
    }
    ::v-deep .el-table:first-child {
      flex: 1;
      margin-right: 30px;
    }
    :v-deep .el-table {
      width: 100%;
    }
  }
}
</style>
